<template>
  <div class="group-store">
    <div class="table-title">
      <el-input v-model="searchData.MultiSearch" style="width:220px;" placeholder="姓名或手机号码"></el-input>
			<el-select v-model="searchData.Grade" placeholder="请选择会员等级" style="position: relative;top: 1px;">
				<el-option :label="'全部会员'" :value="-1"></el-option>
				<el-option :label="'普通会员'" :value="0"></el-option>
				<el-option :label="'白银会员'" :value="1"></el-option>
				<el-option :label="'黄金会员'" :value="2"></el-option>
				<el-option :label="'玫瑰金会员'" :value="3"></el-option>
				<el-option :label="'铂金会员'" :value="4"></el-option>
				<el-option :label="'钻石会员'" :value="5"></el-option>
			</el-select>
			<el-button type="primary" @click="initList" data-auth="store_member_query">查询</el-button>
			<el-button type="primary" @click="handleAdd" data-auth="store_member_add">添加会员</el-button>
			<el-button type="primary" :disabled="!tableData.length" data-auth="store_member_export" @click="handleExcel">导出</el-button>
    </div>
    <div class="table-content">
      <el-table
        border
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="会员姓名"
          prop="Name">
        </el-table-column>
        <el-table-column
          label="手机">
          <template slot-scope="scope">
            <span>{{scope.row.Phone}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="会员等级"
					prop="GradeName">
        </el-table-column>
        <el-table-column
          label="积分"
          prop="AvailablePoint">
        </el-table-column>
        <el-table-column
          label="性别">
          <template slot-scope="scope">
            <span>{{scope.row.Sex===0?'保密':scope.row.Sex===1?'男':'女'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="所属门店"
					prop="OrganizationName">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
						<el-button
              size="mini"
              @click="showInfo(scope.$index, scope.row)">会员详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="table-page">
			<el-pagination
			  background
				@size-change="changePage"
      	@current-change="getList"
      	:current-page.sync="searchData.pageIndex"
      	:page-sizes="[100, 200, 300, 400]"
			  layout="total,prev, pager, next"
			  :total="pageTotal">
			</el-pagination>
    </div>

		<el-dialog
			:title="dialogTitle"
			:visible.sync="roomShow"
			width="560px"
			center>
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
				<el-form-item label="会员姓名：" prop="Name">
					<el-input v-model="ruleForm.Name"></el-input>
				</el-form-item>
				<el-form-item label="手机号：" prop="Phone">
					<el-input maxlength="11" v-model="ruleForm.Phone"></el-input>
				</el-form-item>
				<el-form-item label="会员等级：" prop="Grade">
					<el-select v-model="ruleForm.Grade" placeholder="请选择会员等级">
						<el-option :label="'普通会员'" :value="0"></el-option>
						<el-option :label="'白银会员'" :value="1"></el-option>
						<el-option :label="'黄金会员'" :value="2"></el-option>
						<el-option :label="'玫瑰金会员'" :value="3"></el-option>
						<el-option :label="'铂金会员'" :value="4"></el-option>
						<el-option :label="'钻石会员'" :value="5"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="会员积分：" prop="AvailablePoint">
					<el-input-number v-model="ruleForm.AvailablePoint" :controls="false"></el-input-number>
				</el-form-item>
				<el-form-item label="会员性别：" prop="Sex">
					<el-select v-model="ruleForm.Sex" placeholder="请选择性别">
						<el-option label="保密" :value="0"></el-option>
						<el-option label="男" :value="1"></el-option>
						<el-option label="女" :value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="会员生日：" prop="Birthday">
					<el-date-picker
						v-model="ruleForm.Birthday"
						type="date"
						placeholder="选择日期"
						format="yyyy 年 MM 月 dd 日"
						value-format="yyyy-MM-dd"
						:editable="false"
						:clearable="false">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="电子邮箱：" prop="Email">
					<el-input v-model="ruleForm.Email"></el-input>
				</el-form-item>
				<el-form-item label="住址：" prop="Address">
					<el-input v-model="ruleForm.Address"></el-input>
				</el-form-item>
				<el-form-item label="会员卡号：" prop="CardNo">
					<el-input-number v-model="ruleForm.CardNo" :controls="false"></el-input-number>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="btnSave('ruleForm')">保存</el-button>
				<el-button @click="roomShow = false">取 消</el-button>
			</span>
		</el-dialog>

		<el-dialog
			:title="'客户详情'"
			:visible.sync="infoShow"
			width="560px"
			center>
      <div class="orderinfo-div"><span>会员姓名： {{userInfoData.Name}} </span><span>会员手机： {{userInfoData.Phone}}</span></div>
      <div class="orderinfo-div">
        <span>卡号： {{userInfoData.CardNo?userInfoData.CardNo:'暂无'}}</span>
        <span>等级： {{userInfoData.GradeName}}</span>
        <span>积分： {{userInfoData.AvailablePoint}}</span>
      </div>
			<div class="orderinfo-div">
        <span>性别： {{userInfoData.Sex===0?'保密':userInfoData.Sex===1?'男':'女'}}</span>
        <span>生日： {{userInfoData.Birthday?userInfoData.Birthday:'暂无'}}</span>
        <span>邮箱: {{userInfoData.Email?userInfoData.Email:'暂无'}}</span>
        <span>住址: {{userInfoData.Address?userInfoData.Address:'暂无'}}</span>
      </div>
      <div class="orderinfo-div">
        <span>创建门店：{{userInfoData.OrganizationName?userInfoData.OrganizationName:'暂无'}}</span>
      </div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="handleEdit(userInfoData)" data-auth="store_member_modify">编辑</el-button>
				<el-button @click="handleDelete(userInfoData)" data-auth="store_member_delete">删除</el-button>
			</span>
		</el-dialog>

  </div>
</template>
<script>
  export default {
    data () {
      return {
        pageTotal:0,
        searchData:{
          OrgId:JSON.parse(sessionStorage.getItem('nowmenu')).Id,
					Grade:-1,
          pageIndex:1,
          pageSize:10
        },
				dateTime:[],
        tableData:[],
				infoShow:false,
				userInfoData:{},
				dialogTitle:'',
				roomShow:false,
				ruleForm: {
          Name: "",
          OrganizationId: JSON.parse(sessionStorage.getItem('nowmenu')).Id,
          Phone: "",
          Sex: 0,
          Birthday: "",
          Grade: 0,
          Email: "",
          Address: "",
          CardNo: "",
          AvailablePoint: 0,
        },
        rules: {
          Name: [
            { required: true, message: '请输入会员姓名', trigger: 'blur' },
          ],
          Grade: [
            { required: true,type:'number', message: '请选择会员等级', trigger: 'change' }
          ],
          Phone: [
            { required: true, message: '请输入会员手机号', trigger: 'blur' },
          ],
          Sex: [
            { required: false, message: '', trigger: 'blur' },
          ],
					Birthday: [
            { required: false, message: '', trigger: 'blur' },
          ],
					Email: [
            { required: false, message: '', trigger: 'blur' },
          ],
					Address: [
            { required: false, message: '', trigger: 'blur' },
          ],
					CardNo: [
            { required: false, type:'number',message: '会员号必须为数字', trigger: 'blur' },
          ],
					AvailablePoint: [
            { required: true, type:'number',message: '会员积分不能为空且必须为数字', trigger: 'blur' },
          ],
        }
      }
    },
    created(){
      this.initList();
    },
    methods:{
      initList(){
        this.searchData.pageIndex=1;
        this.roomShow=false;
				this.infoShow=false;
        this.getList();
      },
      changePage(size){
        this.searchData.pageIndex=1;
        this.searchData.pageSize=size;
        this.getList();
      },
      getList(){
        this.$ajax.GetMemberListByPage(this.searchData).then(res=>{
          if(res.Success){
            this.tableData=res.Data.PagedData;
            this.pageTotal=res.Data.TotalCount;
          }
        })
      },
      resetForm(formName) {
        if(!this.$refs[formName]){return};
        this.$refs[formName].resetFields();
      },
			handleExcel(){
				let data=_.cloneDeep(this.searchData);
				data=this.$urlEncode(data);
				window.open(this.$api.GetMemberListToExcel+'?'+data);
			},
			handleAdd() {
        this.dialogTitle='添加会员';
        this.resetForm('ruleForm');
        this.ruleForm={
          Name: "",
          OrganizationId: JSON.parse(sessionStorage.getItem('nowmenu')).Id,
          Phone: "",
          Sex: 0,
          Birthday: "",
          Grade: 0,
          Email: "",
          Address: "",
          CardNo: "",
          AvailablePoint: 0,
        };
        this.roomShow=true;
      },
      handleEdit(row) {
        this.dialogTitle='编辑会员';
        this.resetForm('ruleForm');
				this.ruleForm=_.cloneDeep(row);
				this.roomShow=true;
      },
      handleDelete(row) {
        this.deleteShow('确认删除此会员?',row.Id,'DeleteMember')
      },
      deleteShow(title,id,api){
        this.$confirm(title, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          let data={
            id:id
          };
          this.$ajax[api](data).then(res=>{
            if(res.Success){
              this.$message({
                type: 'success',
                message: '已删除!'
              });
              this.initList();
            }
          })
        }).catch(() => {
        });
      },
			btnSave(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$ajax.SaveMember(this.ruleForm).then(res=>{
              if(res.Success){
                this.$message.success(this.dialogTitle+'成功!');
                this.$refs[formName].resetFields();
                this.initList();
              }
            })
          } else {
            return false;
          }
        });
      },
			showInfo(index,row){
				this.userInfoData=row;
				this.infoShow=true;
			}
    }
  }
</script>
